<template>
	<div id="Classification" class="Classification" v-loading.fullscreen.lock="loading" element-loading-text="请喝杯咖啡稍等一下,正在加载中"
	 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" type="flex" align="top">
		<el-row :gutter="20" class="row-bg" justify="center">
			<!-- 		<el-col :span="5" xs="24">
				<div class="grid-content bg-purple">
					<el-card class="classStyle  hidden-xs-only">
						<div class="text item">
							<el-aside>
								<el-menu class="sidebar-el-menu" unique-opened router background-color="#324157" text-color="#bfcbd9"
								 active-text-color="#20a0ff">
									<template v-for="item in article_categoryOptions">
										<el-menu-item :key="item.article_category_id" @click="article_category_Click(item)">
											<i :class="item.article_category_id"></i><span slot="title">{{ item.title }}</span>
										</el-menu-item>
									</template>
								</el-menu>
							</el-aside>
						</div>
					</el-card>
				</div>
			</el-col> -->
			<el-col :span="24">
				<div :key="index" v-for="(item, index) in article_categoryOptions">
					<el-row :gutter="10">
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<div class="grid-content headertitle">
								<el-divider>
									<div><b>{{ item.title }}</b></div>
								</el-divider>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10">
						<el-col :xs="24" :sm="8" :md="8" :lg="8" v-if="article_category_item.category_id===item.article_category_id" :xl="6"
						 :key="index" v-for="(article_category_item, index) in category_tree_all_list">
							<div class="grid-content"   @click="openSearch(article_category_item)">
								<el-card class="cardStyle">
									<el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5" v-if="article_category_item.icon==null||article_category_item.icon==''"
									 class="hidden-md-and-down">
										<el-avatar shape="square" :size="60" fit="fill" src="https://mxdqh.top:8080/static/book12.jpg"></el-avatar>
									</el-col>
									<el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5" v-else class="hidden-md-and-down">
										<el-avatar shape="square" :size="60" fit="fill" :src="article_category_item.icon"></el-avatar>
									</el-col>
									<el-col :xs="19" :sm="19" :md="19" :lg="19" :xl="19">
										<el-tag type="info" style="font-size: 0.025rem;"><b>{{article_category_item.title}}</b></el-tag>
										<span class="text">({{article_category_item.article_count}} 篇)</span>
										<p class="linktextremark text">
											{{article_category_item.summary}}
										</p>
									</el-col>
								</el-card>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor,
		// Quill
	} from 'vue-quill-editor';
	import * as Quill from 'quill' //引入编辑器
	import {
		constHelp
	} from '../common/contant';
	import common from '../common/common.js'
	export default {
		name: 'Classification',
		data() {
			return {
				url: {
					get_article_list: constHelp['WEBAPIURL'] + '/blogManage/get_article_list',
					// 获取文章类型
					get_article_category_all_list: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_all_list',
					// 获取文章章节
					get_article_category_all_1_list: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_all_1_list',
				},
				articleListData: [],
				article_categoryOptions: [],
				category_tree_all_list: [],
				editVisible: 0, //菜单编辑框
				// 删除用
				cur_page: 1, //当前页
				rows_page: 10, // 一页多少条
				total_page: 0,
				cur_item: {},
				loading: true,
				category_item: {},
			};
		},
		//初期化页面
		created() {
			this.get_article_list()
			this.article_category_Type_combox()
			this.get_article_category_tree_all_list()
		},
		filters: {
			formatDate(time) {
				var date = common.IsNull(time) ? new Date() : new Date(time);
				return common.formatDate(date, 'yyyy-MM-dd hh:mm');
			},
			formatContent(val) {
				return val;
			}
		},
		// 监听
		computed: {},
		methods: {
			//加载类型
			article_category_Type_combox() {
				this.$axios.post(this.url.get_article_category_all_list, {
					article_category_model: "1"
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.article_categoryOptions = res.data.data;
					}
				})
			},
			// 获取文章章节
			get_article_category_tree_all_list() {
				this.$axios.post(this.url.get_article_category_all_1_list, {
					article_category_model: "1"
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						debugger
						console.log(res.data.data)
						this.category_tree_all_list = res.data.data;
					}
				})
			},
			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;
				this.get_article_list();
			},
			article_category_Click(item) {
				this.category_item = item;
				this.get_article_list();
			},
			// 获取用户文章列表
			get_article_list() {
				this.$axios.post(this.url.get_article_list, {
					page_index: this.cur_page,
					page_size: this.rows_page,
					selectWord: this.select_word,
					article_model: "1",
					category_id: this.category_item.article_category_id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.articleListData = res.data.data;
						this.total_page = res.data.total
						this.loading = false
					}
				})
			},
			openSearch(item) {
				if(item.article_count==0){					
					this.$message({
						message: '当前专栏没有可以查看的文章,请欣赏其它专栏!',
						type: 'success'
					});
					return ;
				}
				let routeUrl = this.$router.resolve({
					path: '/ArticleSpecialDetail',
					name: 'ArticleSpecialDetail',
					query: {
						"article_category_id": item.article_category_id
					}
				});
				window.open(routeUrl.href, '_blank');
				// this.editVisible = 1;
				// this.cur_item = item;
			},
			detialtoList(visitflage) {
				this.editVisible = visitflage;
			},
		},
	};
</script>

<style>
	.Classification {
		min-height: 100px;
		min-width: 100%;
	}

	.text {
		color: #999999;
		font-size: 11px;
	}


	.Classification .sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 70px;
		bottom: 0;
		overflow-y: scroll;
	}

	.Classification .sidebar::-webkit-scrollbar {
		width: 0;
	}

	.Classification .sidebar-el-menu:not(.el-menu--collapse) {
		width: 250px;
	}

	.Classification .sidebar>ul {
		height: 100%;
	}

	.classStyle {
		padding: 0;
		background-color: #324157;
	}



	/* 盒子类型 */
	.Classification .cardStyle {
		padding: '0px';
		height: 6.5rem;
		margin: 10px;
	}

	.Classification .el-card__header {
		padding: 10px;
		border-bottom: 1px solid #EBEEF5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.Classification .linktextremark {
		text-indent: 2em;
		display: -webkit-box;
		/* -webkit-box-orient: vertical; */
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>
